<template>
    <div class="detail">
      <ImagePreview :src="baseUrl+form.pictureFile" class="img"></ImagePreview>
      <div style="padding-left: 50px;width: 35%;">
        <p style="font-size: 22px;font-weight: bold;margin-top: 0px;color: #333;">{{ form.meansName }}</p>
        <p><span>比例尺：</span>{{ form.plottingScale }}</p>
        <p><span>关键词：</span>
          <template v-if="form.keyword">
            <el-tag class="ml-2" style="margin-right: 15px;color: #666;" type="info"
              v-for="key in form.keyword.split(',')">{{
                key
              }}</el-tag>
          </template>
          <template v-else>
            <span style="margin-left: 15px;color: #666;">无</span>
          </template>
        </p>
        <p><span>空间位置：</span> {{ form.province }}{{ form.city }}{{ form.county }}</p>
        <p><span>生产日期：</span> {{ form.plotTime }}</p>
        <p><span>制图单位：</span> {{ form.draftingUnit }}</p>
        <p><span>发布单位：</span> {{ form.publishingUnit }}</p>
        <p><el-button type="primary" @click="handleDown">下载</el-button></p>
      </div>
    </div>
  </template>
    
  <script setup name="activeFaultAvoidanceDetail">
  import { detail } from '@/api/thematicMap/probeClass/activeFault';
  const route = useRoute();
  const baseUrl = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=";
  const form = ref({})
  
  // 单条信息
  function getDetail(id) {
    detail(id).then(res => {
      console.log(res.data);
      form.value = res.data;
    })
  }
  
  // 下载文件
  function handleDown() {
      var query = {
          attachId: form.value.pictureFile,
          name: form.value.pictureFileAtt[0].attachName
      }
      location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
  }
  
  getDetail(route.query.id)
  </script>
    
  <style scoped lang="scss">
  .detail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-top: 30px;
  overflow-x: auto;

  .img {
    width: 65%;
    // width: 600px;
    // height: 480px;
    float: left;
  }

  p {
    margin: 30px 0px;
    color: #666;
    overflow: hidden; // 溢出隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
    white-space: nowrap; // 规定段落中的文本不进行换行
    font-size: 18px;
  }
  span{
    font-size: 18px;
  }
}
  </style>
    
    